<template>
    <div class="slide-right">
        <div class="slide-right-prev" @click="onToTop"></div>
        <div class="slide-right-icon-1">
            <div class="slide-right__content-1">
                <div class="text qq-text">QQ：3067554727</div>
                <div class="text">在线沟通，请点我</div>
                <el-button type="primary" plain @click="onJumpQQ">
                    在线咨询
                </el-button>
            </div>
        </div>
        <div class="slide-right-icon-2">
            <div class="slide-right__content-2">
                <p>咨询热线：13533032272</p>
            </div>
        </div>
        <div class="slide-right-icon-3">
            <div class="slide-right__content-3">
                <img :src="`${_oss_}images/wxCustomerServiceCode.png?t=1`" alt="北京华锐云空间" />
            </div>
        </div>
        <div class="slide-right-icon-4" @click="onLeaveMessage">
            <div class="icon"></div>
            <div class="slide-right__content-4">点击咨询留言</div>
        </div>
        <div class="slide-right-icon-5" @click="onLeaveMessage">
            <div class="icon"></div>
            <div class="slide-right__content-5">
                <div class="title">云空间客服群</div>
                <img :src="crowdQrcode" alt="北京华锐云空间" />
            </div>
        </div>
        <div class="slide-right-next" @click="onToBottom"></div>
    </div>

    <div class="sign-in-btn" @click="onSignIn">
        <img :src="`${_oss_}images/icon-sign-in.png`" />
    </div>

    <DialogLeaveMessageP ref="leaveMessageDialogRef" />
</template>
<script setup>
import { useSignIn } from "~/hooks";
import { GetCrowdQrcode } from "~/api";
const QQURL = "tencent://message/?uin=3067554727;Site=;menu=yes";
const signIn = useSignIn();

const leaveMessageDialogRef = ref(null);
const crowdQrcode = ref(null);

const onJumpQQ = () => {
    window.open(QQURL, "_self");
};

const onToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

const onToBottom = () => {
    window.scrollTo({
        top: document.body.scrollHeight,
        behavior: "smooth",
    });
};

const onSignIn = async () => {
    signIn();
};

const onLeaveMessage = () => {
    leaveMessageDialogRef.value.show();
};

const getCrowdQrcode = async () => {
    const res = await GetCrowdQrcode();
    if (res.code == 200) {
        crowdQrcode.value = res.data;
    }
};

getCrowdQrcode();
</script>
<style lang="scss" scoped>
.slide-right {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1f64bf;
    border-radius: 5px 0 0 5px;
    z-index: 99;

    &__content-1,
    &__content-2,
    &__content-3 {
        position: fixed;
        top: 50%;
        right: 41px;
        width: 150px;
        height: 150px;
        background-color: #1f64bf;
        color: #fff;
        border-radius: 5px 0 0 5px;
        transform: translateY(-50%) translateX(200px);
        z-index: 0;
    }

    &__content-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 14px;

        .text {
            margin-bottom: 15px;
        }
    }

    &__content-2 {
        top: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        font-size: 16px;
        height: 80px;

        p {
            line-height: 24px;
        }
    }

    &__content-3 {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 85%;
            height: 85%;
        }
    }

    &__content-4 {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 100px;
        right: 49px;
        width: 120px;
        height: 50px;
        background-color: #1f64bf;
        color: #fff;
        border-radius: 5px 0 0 5px;
        transform: translateX(200px);
        z-index: 0;
        cursor: pointer;
    }

    &__content-5 {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: 50%;
        right: 49px;
        width: 150px;
        height: 180px;
        background-color: #1f64bf;
        color: #fff;
        border-radius: 5px 0 0 5px;
        transform: translateY(-50%) translateX(200px);
        z-index: 0;

        .title {
            color: #fff;
            font-size: 16px;
            padding: 10px;
        }

        img {
            width: 85%;
        }
    }

    &-prev {
        width: 41px;
        height: 50px;
        background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/icon.png") no-repeat;
        background-position: -334px -120px;
        cursor: pointer;
    }

    &-icon-4 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;

        .icon {
            width: 26px;
            height: 28px;
            background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/icon-leave-message.png") no-repeat;
            cursor: pointer;
        }

        &:hover {
            .slide-right__content-4 {
                transform: translateX(0);
            }
        }
    }

    &-icon-5 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;

        .icon {
            width: 30px;
            height: 30px;
            background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/icon-crowd.png") no-repeat 100%/100%;
            cursor: pointer;
        }

        &:hover {
            .slide-right__content-5 {
                transform: translateY(calc(-50% + 30px)) translateX(0);
            }
        }
    }

    &-icon-1,
    &-icon-2,
    &-icon-3 {
        width: 41px;
        height: 50px;
        background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/icon.png") no-repeat;
        cursor: pointer;
    }

    &-icon-1 {
        background-position: -389px -73px;

        &:hover {
            >div {
                transform: translateY(calc(-50% - 50px)) translateX(0);
            }
        }
    }

    &-icon-2 {
        background-position: -389px -160px;

        &:hover {
            >div {
                transform: translateY(-50%) translateX(0);
            }
        }
    }

    &-icon-3 {
        background-position: -385px -120px;

        &:hover {
            >div {
                transform: translateY(calc(-50% + 50px)) translateX(0);
            }
        }
    }

    &-next {
        width: 41px;
        height: 50px;
        background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/icon.png") no-repeat;
        background-position: -334px -160px;
        cursor: pointer;
    }
}

.sign-in-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(50% - 235px);
    right: 0;
    width: 41px;
    height: 50px;
    background-color: #1f64bf;
    z-index: 99;
    border-radius: 5px 0 0 5px;
    cursor: pointer;

    img {
        width: 35px;
        height: 35px;
    }
}
</style>
